import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 动态路由机制的运作依赖路由器的两个基本功能：路由器之间适时的路由信息交换，对路由表的维护：
// 1. 路由器之间适时地交换路由信息。
// 动态路由之所以能根据网络的情况自动计算路由、选择转发路径，是由于当网络发生变化时，路由器之间彼此交换的路由信息会告知对方网络的这种变化，通过信息扩散使所有路由器都能得知网络变化。
// 2. 路由器根据某种路由算法（不同的动态路由协议算法不同）把收集到的路由信息加工成路由表，供路由器在转发IP报文时查阅。
// 在网络发生变化时，收集到最新的路由信息后，路由算法重新计算，从而可以得到最新的路由表。
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    redirect: '/staging',
    children: [
      {
        path: '/staging',
        name: 'staging',
        component: () =>
          import(/* webpackChunkName: "staging" */ '../views/StagingView.vue')
      },
      {
        path: '/page',
        name: 'page',

        //一、为什么要使用路由懒加载
        // 为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

        // 二、定义
        // 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

        // 三、使用
        // 常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import
        component: () =>
          import(/* webpackChunkName: "page" */ '../views/PageView.vue')
      },
      {
        path: '/knowledge',
        name: 'knowledge',
        component: () =>
          import(/* webpackChunkName: "knowledge" */ '../views/Knowledge.vue')
      },
      {
        path: '/allessay',
        name: 'allessay',
        component: () =>
          import(/* webpackChunkName: "allessay" */ '../views/AllEssay.vue')
      },
      {
        path: '/classify',
        name: 'classify',
        component: () =>
          import(/* webpackChunkName: "classify" */ '../views/ClassifyView.vue')
      },
      {
        path: '/label',
        name: 'label',
        component: () =>
          import(/* webpackChunkName: "label" */ '../views/LabelView.vue')
      },
      {
        path: '/bill',
        name: 'bill',
        component: () =>
          import(/* webpackChunkName: "bill" */ '../views/BillView.vue')
      },
      {
        path: '/commenton',
        name: 'commenton',
        component: () =>
          import(/* webpackChunkName: "commenton" */ '../views/CommentOn.vue')
      },
      {
        path: '/email',
        name: 'email',
        component: () =>
          import(/* webpackChunkName: "email" */ '../views/EmailView.vue')
      },
      {
        path: '/document',
        name: 'document',
        component: () =>
          import(/* webpackChunkName: "document" */ '../views/DocumentView.vue')
      },
      {
        path: '/search',
        name: 'search',
        component: () =>
          import(/* webpackChunkName: "search" */ '../views/SearchView.vue')
      },
      {
        path: '/visit',
        name: 'visit',
        component: () =>
          import(/* webpackChunkName: "visit" */ '../views/VisitView.vue')
      },
      {
        path: '/user',
        name: 'user',
        component: () =>
          import(/* webpackChunkName: "user" */ '../views/UserView.vue')
      },
      {
        path: '/system',
        name: 'system',
        redirect: '/system/systems',
        component: () =>
          import(/* webpackChunkName: "system" */ '../views/SystemView.vue'),
        children: [
          {
            path: '/system/systems',
            name: 'systems',
            component: () =>
              import(
                /* webpackChunkName: "systems" */ '../views/SystemViews.vue'
              )
          },
          {
            path: '/system/word',
            name: 'word',
            component: () =>
              import(/* webpackChunkName: "word" */ '../views/WordView.vue')
          },
          {
            path: '/system/seo',
            name: 'seo',
            component: () =>
              import(/* webpackChunkName: "seo" */ '../views/SeoView.vue')
          },
          {
            path: '/system/datastatistics',
            name: 'datastatistics',
            component: () =>
              import(
                /* webpackChunkName: "datastatistics" */ '../views/DataStatistics.vue'
              )
          },
          {
            path: '/system/oss',
            name: 'oss',
            component: () =>
              import(/* webpackChunkName: "oss" */ '../views/OssView.vue')
          },
          {
            path: '/system/smtp',
            name: 'smtp',
            component: () =>
              import(/* webpackChunkName: "smtp" */ '../views/SmtpView.vue')
          },
          {
            path: '/system/text',
            name: 'text',
            component: () =>
              import(/* webpackChunkName: "smtp" */ '../views/TextView.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () =>
      import(/* webpackChunkName: "login" */ '../views/LoginView.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () =>
      import(/* webpackChunkName: "register" */ '../views/RegisterView.vue')
  },
  {
    path: '/text',
    name: 'text',
    component: () =>
      import(/* webpackChunkName: "smtp" */ '../views/TextView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
